/*
* @Author: Josh
* @Date:   2019-08-15 10:09:39
* @Last Modified by:   Administrator
* @Last Modified time: 2019-08-15 22:07:36
*/
/* 表单控件样式 */

/* 单行容器 */
.ju-form-item {
    display      : flex;
    position     : relative;
    padding-left : 1rem;
    border-bottom: 1px solid #eee;
}
/* 去掉最后一行的下边框 */
.ju-form-item:last-child {
    border-bottom: none;
}


/* 控件标签 */
.ju-form-item > .ju-form-label {
    display    : block;
    width      : 3.5rem;
    font-size  : .8rem;
    color      : #666;
    height     : 2rem;
    line-height: 2rem;
}
/* 控件内容区 */
.ju-form-item > .ju-form-body {
    flex: 1;
}
/*内容区的输入框*/
.ju-form-item > .ju-form-body > .ju-input {
    width      : 100%;
    height     : 2rem;
    line-height: 2rem;
    font-size  : .8rem;
    border     : none;
}
/* 表单中的图标 */
.ju-form-item > .ju-form-body > .ju-input-icon {
    position     : absolute;
    width        : .8rem;
    height       : .8rem;
    line-height  : .8rem;
    top          : 50%;
    margin-top   : -.4rem;
    right        : 1rem;
    font-size    : .6rem;
    border-radius: 50%;
}
/*清空图标*/
.ju-form-item > .ju-form-body > .ju-input-icon.reset {
    background: #aaa;
    color     : #fff;
    display   : none;
}
/*控制清空图标的显示*/
.ju-form-item > .ju-form-body > .ju-input:valid + .ju-input-icon.reset {
    display: block;
}

/*错误提示图标*/
.ju-form-item > .ju-form-body > .ju-input-icon.warning {
    color : red;
    border: 1px solid red;
}
/*图标的隐藏*/
.ju-form-item > .ju-form-body > .ju-input-icon.hidden {
    display: none;
}


/* 自定义单选&多选 */
.ju-form-item > .ju-radio, .ju-form-item > .ju-check {
    flex       : 1;
    font-size  : .8rem;
    line-height: 2rem;
}
/* 隐藏radio&check类型的input */
.ju-form-item > .ju-radio > .ju-radio-input,
.ju-form-item > .ju-check > .ju-check-input {
    position: absolute;
    left    : -999rem;
}

/* 单选未选中状态图标 */
.ju-form-item > .ju-radio > .ju-radio-icon {
    margin-right: .5rem;
    color       : #09BB07;
    visibility  : hidden;
} 
/* 单选选中状态图标 */
.ju-form-item > .ju-radio.checked > .ju-radio-icon {
    visibility: visible;
} 

/* 多选未选中时的图标 */
.ju-form-item > .ju-check > .ju-check-icon {
    margin-right : .5rem;
    border       : 1px solid #ccc;
    border-radius: 50%;
    color        : rgba(0,0,0,0);
    font-size    : .6rem;
    width        : .8rem;
    height       : .8rem;
    line-height  : .8rem;
}
/* 多选选中时的图标 */
.ju-form-item > .ju-check.checked > .ju-check-icon {
    background  : #09BB07;
    color       : #fff;
    border-color: rgba(0,0,0,0);
}